<template>
  <Modal :value="showModal" title="修改商品数据" @on-cancel="closeModal" :footer-hide="true">
    <Form ref="JForm" :model="formData" :rules="rules">
      <FormItem class="custom3-class part-class" label="商品名称" prop="name">
        <Input v-model="formData.goodsName" placeholder="请输入商品名称"></Input>
      </FormItem>
      <FormItem class="custom3-class part-class" label="采购价格" prop="price">
        <div class="m-formitem">
          <InputNumber v-model="formData.goodsBuyingPriceAverage" :active-change="false" :controls-outside="true"
                       :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :min="0"
                       :parser="value => value.replace(/\$\s?|(,*)/g, '')" :precision="2"></InputNumber>
        </div>
      </FormItem>
      <FormItem class="custom3-class part-class" label="保质天数" prop="type">
        <Input v-model="formData.goodsKeepDay" :active-change="false" :controls-outside="true"
               :min="0" :parser="value => value.replace(/\$\s?|(,*)/g, '')" placeholder="请输入保质天数"
        ></Input>
      </FormItem>
      <FormItem class="custom3-class part-class" label="商品条形码" prop="name">
        <Input v-model="formData.goodsBarcode" placeholder="请输入商品条形码"></Input>
      </FormItem>
      <FormItem class="custom3-class part-class" label="售卖价格" prop="price">
        <div class="m-formitem">
          <InputNumber v-model="formData.goodsSellingPriceCustom" :active-change="false" :controls-outside="true"
                       :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :min="0"
                       :parser="value => value.replace(/\$\s?|(,*)/g, '')" :precision="2"></InputNumber>
        </div>
      </FormItem>
      <FormItem class="custom3-class part-class" label="告警天数" prop="type">
        <Input v-model="formData.goodsKeepDay" :active-change="false" :controls-outside="true"
               :min="0" :parser="value => value.replace(/\$\s?|(,*)/g, '')" placeholder="请输入告警天数"></Input>
      </FormItem>
      <FormItem class="custom3-class part-class" label="商品类别" prop="type">
        <Select v-model="formData.goodsTypeIds" :clearable="true" :multiple="true" placeholder="请选择商品类别">
          <Option v-for="item in typeList" :key="item.typeCode" :value="item.id">{{ item.typeName }}</Option>
        </Select>
      </FormItem>
      <FormItem class="custom3-class part-class" label="商品图片">
        <Upload ref="upload" :on-success="setFile" :show-upload-list="false" action="//127.0.0.1:8000/file/pic"
                name="pic">
          <Button :loading="loadingStatus">{{ loadingStatus ? '上传中' : upfile }}</Button>
        </Upload>
      </FormItem>
      <img v-show="formData.goodsImgUrls" :src="'http://127.0.0.1:8001/'+formData.goodsImgUrls" alt="图片加载失败"
           class="img" style="width: 160px;height: 160px;"/>
      <Button style="display: block;margin:auto" type="primary" @click="editGoods">修改</Button>
    </Form>
  </Modal>
</template>

<script>
import {mapActions} from 'vuex'
import {editRules} from '../js/rules'

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    goodsId: {
      type: String,
      default: ''
    },
    typeList: [],
  },
  data() {
    return {
      formData: {
        // name: ''
      },
      // file: {
      //   id: 2,
      //   name: ''
      // },  // 商品图片
      loadingStatus: false,   // 是否在上传中
      upfile: '选择更改的商品图片',   // 上传图片按钮的text
      // unitInfo: [],    // 商品单位数据
      typeInfo: [],    // 商品类别数据
      rules: editRules(this),
    }
  },
  watch: {
    'showModal'(val) {
      if (val) {
        this._getGoodsData(this.goodsId)
      }
    }
  },
  mounted() {
    // this._getUnitInfo()
    // this._getType()
  },
  methods: {
    // 上传图片
    setFile(response) {
      console.log(2)
      this.loadingStatus = true;
      setTimeout(() => {
        // this.file = {
        //   // id: response.pic.id,
        //   name: response.data
        // }
        this.formData.goodsImgUrls = response.data
        this.loadingStatus = false;
        this.upfile = '选择更改的商品图片'
        this.$Message.success('上传成功')
      }, 500);
    },
    // 修改商品
    editGoods() {
      this.$refs.JForm.validate((valid) => {
        if (valid) {
          this._editGoods()
          this.closeModal()
          this.$emit('reloadTable')
        }
      })
    },
    // 关闭页面
    closeModal() {
      this.formData = {}
      this.file = {
        // id: 2,
        // name: ''
      }
      this.upfile = '选择更改的商品图片'
      this.$emit('closeModal')
    },
    // 修改商品接口
    _editGoods() {
      const url = '/goods/update/' + this.formData.id

      this.formData.goodsBuyingPriceAverage = this.formData.goodsBuyingPriceAverage * 100
      this.formData.goodsSellingPriceCustom = this.formData.goodsSellingPriceCustom * 100
      this.formData.goodsTypeIds = this.formData.goodsTypeIds.join()
      this.PUT_DATA({
        dataUrl: url,
        // picture: this.file.id,
        ...this.formData
      })
    },
    // 获取当前商品数据接口
    async _getGoodsData(id) {
      const url = '/goods/' + id
      const res = await this.GET_DATA({
        dataUrl: url,
      })
      if (res) {
        this.$nextTick(() => {
          this.formData = res.data
          this.formData.goodsBuyingPriceAverage = this.formData.goodsBuyingPriceAverage / 100
          this.formData.goodsSellingPriceCustom = this.formData.goodsSellingPriceCustom / 100
          let goodsTypeIds = this.formData.goodsTypeIds.split(',');
          this.formData.goodsTypeIds = goodsTypeIds.map(v => Number(v))
          // this.file = res.data.file
        })
      }
    },
    // 获取商品单位接口
    // async _getUnitInfo () {
    //   const url = 'goods/unitinfo'
    //   const res = await this.GET_DATA({
    //     dataUrl: url
    //   })
    //   if (res) {
    //     this.$nextTick(() => {
    //       this.unitInfo = res.data
    //     })
    //   }
    // },
    // 获取商品类别接口
    // async _getType() {
    //   this.loading = true
    //   const url = '/goodsType/list'
    //   // let pageTemp = page || 0
    //   // let pageSizeTemp = pageSize || 5
    //   const res = await this.GET_DATA({
    //     dataUrl: url,
    //     // page: pageTemp,
    //     // size: pageSizeTemp
    //   })
    //   if (res) {
    //     this.$nextTick(() => {
    //       this.typeInfo = res.data
    //       // this.typeLen = res.pageable.totalElements
    //       // this.loading = false
    //     })
    //   }
    // },
    ...mapActions({
      GET_DATA: '_GET_DATA',
      PUT_DATA: '_PUT_DATA'
    })
  }
}
</script>

<style lang="scss">
.custom3-class {
  width: 33%;
}


.part-class {
  display: inline-block;
}

</style>